<template>
  <view class="topic-page">
    <!-- Tab切换栏 -->
    <view class="tab-bar">
      <text 
        class="tab-item" 
        :class="{active: currentTab === item.key}"
        v-for="(item, index) in tabList" 
        :key="index"
        @click="switchTab(item.key)"
      >{{ item.name }}</text>
      <!-- 搜索按钮 -->
      <image class="search-icon" src="/static/search.png" @click="showSearch"></image>
    </view>

    <!-- 搜索框（弹窗形式） -->
    <view class="search-modal" v-if="isSearchShow">
      <input 
        type="text" 
        class="search-input" 
        placeholder="搜索话题" 
        v-model="searchKey"
        @confirm="searchTopic"
      />
      <button class="cancel-btn" @click="hideSearch">取消</button>
    </view>

    <!-- 话题列表（动态加载） -->
    <scroll-view 
      class="topic-scroll" 
      @scrolltolower="loadMoreTopics"
      refresher-enabled
      @refresherrefresh="refreshTopics"
    >
      <view class="topic-item" v-for="(item, index) in topicList" :key="index">
        <!-- 热点标识 -->
        <text class="hot-tag" v-if="item.isHot">热点</text>
        <!-- 话题标题 -->
        <text class="topic-title">{{ item.title }}</text>
        <!-- 话题内容 -->
        <text class="topic-content">{{ item.content }}</text>
        <!-- 统计信息 + 发表人员 -->
        <view class="topic-footer">
          <text class="view-count">{{ item.viewCount }}观点</text>
          <text class="author">发布者：{{ item.author.name }}</text>
        </view>
      </view>

      <!-- 加载中/无更多提示 -->
      <view class="load-tip" v-if="isLoading">加载中...</view>
      <view class="load-tip" v-if="!isLoading && !hasMore">没有更多内容了</view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // Tab切换数据
      tabList: [
        { key: 'track', name: '追踪' },
        { key: 'topic', name: '话题榜' },
        { key: 'view', name: '观点榜' }
      ],
      currentTab: 'track',
      
      // 搜索相关
      isSearchShow: false,
      searchKey: '',
      
      // 话题列表数据
      topicList: [],
      page: 1,
      pageSize: 10,
      isLoading: false,
      hasMore: true
    };
  },
  onLoad() {
    // 初始化加载话题
    this.loadTopics();
  },
  methods: {
    // 切换Tab
    switchTab(tabKey) {
      this.currentTab = tabKey;
      // 切换Tab后重置列表并重新加载
      this.page = 1;
      this.topicList = [];
      this.hasMore = true;
      this.loadTopics();
    },

    // 加载话题（模拟云端请求）
    loadTopics() {
      this.isLoading = true;
      // 模拟云端接口请求
      setTimeout(() => {
        // 模拟不同Tab对应的数据源
        const mockData = this.getMockTopics(this.currentTab);
        if (mockData.length > 0) {
          this.topicList = [...this.topicList, ...mockData];
          this.page++;
        } else {
          this.hasMore = false;
        }
        this.isLoading = false;
      }, 1000);
    },

    // 模拟不同Tab的云端数据
    getMockTopics(tabKey) {
      const baseMock = [
        {
          title: '曼联客场不败次在英超排第二，阿森纳27次客场不败',
          content: '曼联客场对阵阿斯顿维拉，这场比赛的结果对于现阶段的曼联来说影响并不是很大，但如果一旦曼联输球，他们的同城死敌曼城就得提前加冕本赛季的英超冠军。在这样的大背景下，曼联众将士自然是不愿意间接助攻死敌夺冠，因此在上半场落后的情况下，曼联在下半场发起了猛烈地反扑，最终红魔以3-1的比分战胜了对手。',
          viewCount: 119,
          isHot: true,
          author: { name: '足球评论员A', id: '123' }
        },
        {
          title: '#司机为救婴儿闯红灯#',
          content: '网红司机为救婴儿连闯3红灯，警察查实后取消处罚。',
          viewCount: 1419,
          isHot: false,
          author: { name: '社会新闻编辑', id: '456' }
        }
      ];
      
      // 不同Tab返回不同数据（模拟）
      if (tabKey === 'topic') {
        return [...baseMock, {
          title: '#2025年新能源汽车销量突破3000万辆#',
          content: '据乘联会数据，2025年国内新能源汽车销量达3020万辆，同比增长25%。',
          viewCount: 5678,
          isHot: true,
          author: { name: '汽车行业分析师', id: '789' }
        }];
      }
      return baseMock;
    },

    // 下拉刷新
    refreshTopics() {
      this.page = 1;
      this.topicList = [];
      this.hasMore = true;
      this.loadTopics();
      this.$refs.scrollView && this.$refs.scrollView.stopPullDownRefresh();
    },

    // 上拉加载更多
    loadMoreTopics() {
      if (!this.isLoading && this.hasMore) {
        this.loadTopics();
      }
    },

    // 显示搜索框
    showSearch() {
      this.isSearchShow = true;
    },

    // 隐藏搜索框
    hideSearch() {
      this.isSearchShow = false;
      this.searchKey = '';
    },

    // 搜索话题（模拟）
    searchTopic() {
      if (this.searchKey.trim()) {
        // 模拟搜索结果（实际调用接口）
        this.topicList = this.topicList.filter(item => 
          item.title.includes(this.searchKey) || item.content.includes(this.searchKey)
        );
        this.hideSearch();
      }
    }
  }
};
</script>

<style scoped>
.topic-page {
  background: #f5f5f5;
  min-height: 100vh;
}

/* Tab切换栏 */
.tab-bar {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 15rpx 20rpx;
  border-bottom: 1rpx solid #eee;
}
.tab-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  padding: 10rpx 0;
}
.tab-item.active {
  color: #ff4d4f;
  font-weight: bold;
  border-bottom: 2rpx solid #ff4d4f;
}
.search-icon {
  width: 36rpx;
  height: 36rpx;
  margin-left: 15rpx;
}

/* 搜索弹窗 */
.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 15rpx 20rpx;
  z-index: 999;
  display: flex;
  align-items: center;
}
.search-input {
  flex: 1;
  border: 1rpx solid #eee;
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
  font-size: 26rpx;
}
.cancel-btn {
  margin-left: 15rpx;
  font-size: 26rpx;
  color: #666;
  background: transparent;
}

/* 话题列表 */
.topic-scroll {
  height: calc(100vh - 80rpx);
  padding: 15rpx;
}
.topic-item {
  background: #fff;
  border-radius: 8rpx;
  padding: 15rpx;
  margin-bottom: 15rpx;
}
.hot-tag {
  font-size: 24rpx;
  color: #ff4d4f;
  border: 1rpx solid #ff4d4f;
  border-radius: 16rpx;
  padding: 2rpx 10rpx;
  margin-right: 10rpx;
}
.topic-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  display: block;
}
.topic-content {
  font-size: 26rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 10rpx;
}
.topic-footer {
  font-size: 24rpx;
  color: #999;
  display: flex;
  justify-content: space-between;
}
.load-tip {
  text-align: center;
  padding: 20rpx;
  font-size: 26rpx;
  color: #999;
}
</style>